<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,user-scalable=no" />
	<title>流量加油</title>
	<link rel="stylesheet" type="text/css" href="css/mainBack.css">
	<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/iconfonts/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script>
		setRh5();
		window.addEventListener("orientationchange", setRh5);
		window.addEventListener("resize", setRh5);

		function setRh5() {
			var html = document.querySelector("html");
			var width = html.getBoundingClientRect().width;
			html.style.fontSize = width / 20 + "px";
		}
	</script>
</head>

<body data-type = "index">
	<section class="wrap">
		<!-- 流量加油头部 -->
		<div class="jiayou_bg">
			<!--<h2 class="animated lightSpeedIn">节假包</h2>
			<section>
				<p class="animated zoomInLeft"></p>
			</section>-->
		</div>
		<!-- 内容区域 -->
		<div class="jiayou_main">
			<!-- 切换 -->

			<ul class="jiayou_tab">
				<li class="active"><em>短信推荐</em></li>
				<li><em>验证码推荐</em></li>
			</ul>

			<input type="hidden" id="recommendWay" name="recommendWay" value="3">

			<div class="jiayou_flow">
				<div class="jiayou_img"><img src=''></div>
				<div class="jiayou_title">
					<h3></h3>
					<h4>￥<span class="productPrice"></span><span class="trriffUnit"></span><em></em></h4>
					<h4>
						<div>
							<span class="money" style="color: #ff9f38">
								<i class="iconfont icon-yongjin"></i>佣金￥<span class="commi"></span>
							</span>
						</div>
						<!--</em>&nbsp&nbsp闪付￥1</em>-->
					</h4>
				</div>

				<div class="bgqr">
					<i class="icon iconfont icon-qrcode" style="color: #ff5408;">&#xe6f9;</i>
					<span class="prdqrcode">产品二维码</span>
				</div>
				
				<!--<div id="shanfu" class="animated" onclick="window.open('http://fwp.juboon.com:80/fwp/ui/web/difference.html','_self')"></div>-->
			</div>
			<div class="jiayou_tishi">
				<a href="javascript:;" class="fenxiang"></a>
				<a href="http://renren.93liu.cn/test/bindNatural.html">立即绑定手机号码赚取佣金！<i class="iconfont icon-fenxiang"></i></a>

			</div>
			<!-- 手机订购 -->
			<div class="jiayou_Order">
				<form>
					<input type="tel" id="tel" placeholder="请输入11位手机号码" maxlength="11">
					<!-- CheckBox -->
					<input type="hidden" id="effectiveMode" name="effectiveMode" value="0">

					<!-- 验证码 -->
					<div class="VerificationBox">
						<div class="VerificationCode">
							<input type="hidden" name="orderId" id="orderId" value="">
							<input type="text" name="text" id="authCode" placeholder="请输入验证码" value="">
							<div id="code">获取验证码</div>
						</div>
					</div>
					<div class="jiayou_button">
						<!--<a href="javascript:void(0);" class="jiayoubtn_a">月付推荐</a>
						<a href="javascript:void(0);" class="jiayoubtn_b">闪付推荐</a>-->
					</div>
					<a href="javascript:void(0);" id="button">月付推荐</a>
				</form>
			</div>
			<!-- 订购提示 -->
			<div id="jiayou_tishi">

				<h2><i></i><em>订购提示</em><i></i></h2>

				<h3><i class="iconfont icon-ywgz"></i><em>业务规则</em></h3>
				<p class="ywgz"></p>

				<!--<h3><i class="iconfont icon-gwts"></i><em>温馨提示</em></h3>
				<p class="gwts"></p>-->

				<h3><i class="iconfont icon-cjwt"></i><em>常见问题</em></h3>
				<p>1.超出套餐流量按照原套餐资费收取。 2.退订请咨询当地联通营业厅或10010热线。 3.流量包抵扣规则：定向流量-日租快餐包流量-闲时流量-免费流量-后向流量-暑假流量包-基本套餐流量-月功能包流量-半年包流量-。
				</p>

			</div>
		</div>

		<!-- 立即订购弹窗 -->
		<div class="juboon_popup">
			<div class="juboon_popup_con animated">
				<h3 class="popup_title">温馨提示</h3>
				<section>
					<p id="note">您的订购已受理，等待系统通知。</p>
				</section>
				<div class="juboon_popup_close">我知道了</div>
			</div>
		</div>
		<!-- END立即订购弹窗 -->
		<!-- 二维码弹窗 -->
		<div class="QR_popup">
			<div class="QR_popup_con animated">
				<h3 class="QR_popup_title">产品二维码</h3>
				<section id="qrCode">

				</section>
				<div class="QR_popup_close">我知道了</div>
			</div>
		</div>
		<!-- END二维码弹窗 -->

		<!-- 分享弹窗 -->
		<div class="juboon_share">
			<div class="juboon_share_con"><img src="img/juboon_share.png"></div>
		</div>
		<!-- END分享弹窗 -->
	</section>

	<div class="qrmask">
		
		<div class="outdiv">
			<div class="cha">×</div>
			<div class="qrmain">
				<img class="imgtitle" src="" alt="">
				<span class="qrtitle">流量商城</span>
				<img class="prdpic" src="" alt="">

				<div>
					<img class="qrcodeimg" src="" alt="">
					<span class="qrprdname">[<span class="prdqrname"></span>]
						<span class="qrprdprice">￥<span></span></span>
					</span>
				</div>

				<div class="qrinfo">截屏保存分享给您的朋友</div>
			</div>

		</div>
	</div>
	
	<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

	<!-- JavaScript -->
	<script type="text/javascript">
		// var shanfu = document.querySelector("#shanfu");
		// shanfu.addEventListener("touchstart", function () {
		// 	this.classList.add("rubberBand");
		// });
		// shanfu.addEventListener("touchend", function () {
		// 	setTimeout(function () {
		// 		shanfu.classList.remove("rubberBand");
		// 	}, 1000)
		// });

		// var tel = document.querySelector("#tel");
		// var wrap = document.querySelector(".wrap");

		// // 排除苹果设备
		// var ua = navigator.userAgent.toLowerCase();
		// if (!/iphone|ipad|ipod/.test(ua)) {
		// 	tel.onfocus = function () {
		// 		wrap.scrollTop = 300;
		// 	};
		// 	tel.onblur = function () {
		// 		wrap.scrollTop = 0;
		// 	}
		// }

		// // 弹窗
		// window.onload = function () {
		// 	var p1 = new Popup();
		// 	p1.init({
		// 		id: "#button",
		// 		commType: "0"
		// 	});

		// 	var p2 = new Popup();
		// 	p2.init({
		// 		id: ".jiayoubtn_b",
		// 		commType: "1"
		// 	});

		// 	var p3 = new Popup();
		// 	p3.init({
		// 		id: "#button",
		// 		commType: "0"
		// 	});

		// }

		// function Popup() {
		// 	var aBtn = null;
		// 	var oPopup = null;
		// 	var oPopupCon = null;
		// 	var oPopupClose = null;
		// }

		// Popup.prototype.init = function (opt) {
		// 	this.aBtn = document.querySelector(opt.id);
		// 	this.oPopup = document.querySelector(".juboon_popup");
		// 	this.oPopupCon = document.querySelector(".juboon_popup_con");
		// 	this.oPopupClose = document.querySelector(".juboon_popup_close");

		// 	var This = this;

		// 	this.aBtn.addEventListener("click", function () {
		// 		var productCode = "GSJ205";
		// 		var toMobile = $("#tel").val();
		// 		var re = /^1[3|4|5|7|8][0-9]\d{8}$/;
				
		// 		if (toMobile == '') {
		// 			$("#note").html("请输入推荐的手机号码1!");
		// 			This.oPopup.style.display = "block";
		// 			This.oPopupCon.classList.remove("zoomOutUp");
		// 			This.oPopupCon.classList.add("zoomInDown");
		// 			return;
		// 		}

		// 		if (!re.test(toMobile)) {
		// 			$("#note").html("号码格式不正确，请重新输入!");
		// 			This.oPopup.style.display = "block";
		// 			This.oPopupCon.classList.remove("zoomOutUp");
		// 			This.oPopupCon.classList.add("zoomInDown");
		// 			return;
		// 		}
		// 		var recommendWay = $("#recommendWay").val(); //3短信 2验证码
		// 		var effectiveMode = $("#effectiveMode").val(); //0立即生效  1次月生效

		// 		if (recommendWay == '3') {

		// 			$.ajax({
		// 				type: "post",
		// 				url: "http://fwp.juboon.com:80/fwp/wo/wap/product/recommend",
		// 				data: {
		// 					"toMobile": toMobile,
		// 					"productCode": productCode,
		// 					"recommendWay": recommendWay,
		// 					"commType": opt.commType,
		// 					"effectiveMode": effectiveMode,
		// 					"orderFrom": "2"
		// 				},
		// 				dataType: "json",
		// 				contentType: "application/x-www-form-urlencoded; charset=UTF-8",

		// 				success: function (data) {
		// 					if (data.success) {
		// 						$("#tel").val("");
		// 					}
		// 					$("#note").html(data.content);
		// 				}
		// 			});
		// 		} else {

		// 			// var authCode = $("#authCode").val(); //验证码
		// 			// if (authCode.length != 6) {
		// 			// 	$("#note").html("请输入6位验证码!");
		// 			// 	This.oPopup.style.display = "block";
		// 			// 	This.oPopupCon.classList.remove("zoomOutUp");
		// 			// 	This.oPopupCon.classList.add("zoomInDown");
		// 			// 	return;
		// 			// }

		// 			// var orderId = $("#orderId").val();
		// 			// if (orderId == '') {
		// 			// 	$("#note").html("验证码异常，请重新获取!");
		// 			// 	This.oPopup.style.display = "block";
		// 			// 	This.oPopupCon.classList.remove("zoomOutUp");
		// 			// 	This.oPopupCon.classList.add("zoomInDown");
		// 			// 	return;
		// 			// }

		// 			// $.ajax({
		// 			// 	type: "post",
		// 			// 	url: "",
		// 			// 	data: {
		// 			// 		"orderId": orderId,
		// 			// 		"authCode": authCode,
		// 			// 		"commType": opt.commType
		// 			// 	},
		// 			// 	dataType: "json",
		// 			// 	contentType: "application/x-www-form-urlencoded; charset=UTF-8",

		// 			// 	success: function (data) {
		// 			// 		if (data.success) {
		// 			// 			$("#tel").val("");
		// 			// 			$("#authCode").val("");
		// 			// 		}
		// 			// 		$("#note").html(data.content);
		// 			// 	}
		// 			// });
		// 		}

		// 		This.oPopup.style.display = "block";
		// 		This.oPopupCon.classList.remove("zoomOutUp");
		// 		This.oPopupCon.classList.add("zoomInDown");
		// 	});
		// 	this.oPopupClose.addEventListener("click", function () {
		// 		This.oPopupCon.classList.remove("zoomInDown");
		// 		This.oPopupCon.classList.add("zoomOutUp");
		// 		setTimeout(function () {
		// 			This.oPopup.style.display = "none";
		// 		}, 1000);
		// 	});
		// }
		// // 分享弹窗
		// // var share = document.querySelector(".fenxiang");
		// // var juboon_share = document.querySelector(".juboon_share");
		// // share.addEventListener("click", function () {
		// // 	juboon_share.style.display = "block";
		// // })
		// // juboon_share.addEventListener("click", function () {
		// // 	juboon_share.style.display = "none";
		// // })

		// var iconQR = document.querySelector(".iconQR");
		// var QR_popup = document.querySelector(".QR_popup");
		// var QRCon = document.querySelector(".QR_popup_con");
		// var QRClose = document.querySelector(".QR_popup_close");
		// iconQR.addEventListener("click", function () {
		// 	QR_popup.style.display = "block";
		// 	QRCon.classList.remove("zoomOutUp");
		// 	QRCon.classList.add("zoomInDown");
		// })
		// QRClose.addEventListener("click", function () {
		// 	QRCon.classList.remove("zoomInDown");
		// 	QRCon.classList.add("zoomOutUp");
		// 	setTimeout(function () {
		// 		QR_popup.style.display = "none";
		// 	}, 1000);
		// })

		// // function getQrCode(productCode) {

		// // 	$.ajax({
		// // 		type: "post",
		// // 		url: "",
		// // 		data: {
		// // 			"productCode": productCode
		// // 		},
		// // 		dataType: "json",
		// // 		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		// // 		async: false,
		// // 		success: function (data) {
		// // 			if (data.success) {
		// // 				$("#qrCode").html('<div class="img" id="qrCode"><img src=' + data.message + '></div><p>长按二维码保存</p>');
		// // 			} else {
		// // 				$("#qrCode").html('<p>' + data.content + '</p>');
		// // 			}
		// // 		}
		// // 	});
		// // }

		// /*倒计时*/
		// // (function () {
		// // 	var time = 60;
		// // 	var iTimer = null;
		// // 	var oBtn = document.querySelector("#code");

		// // 	function settime() {
		// // 		if (time == 0) {
		// // 			clearInterval(iTimer);
		// // 			time = 60;
		// // 			oBtn.innerHTML = "获取验证码";
		// // 			oBtn.style.cssText = "color: #f5a42a;-webkit-text-fill-color: #ff5001;";
		// // 			return;
		// // 		} else {
		// // 			time--;
		// // 			oBtn.innerHTML = "重新获取(" + time + ")";
		// // 			oBtn.style.cssText = "color: #a7a7a7;-webkit-text-fill-color: #a7a7a7";
		// // 		}

		// // 	}

		// // 	oBtn.addEventListener("touchstart", function (event) {
		// // 		if (time === 60) {

		// // 			var oPopup = document.querySelector(".juboon_popup");
		// // 			var oPopupCon = document.querySelector(".juboon_popup_con");
		// // 			var oPopupClose = document.querySelector(".juboon_popup_close");

		// // 			var productCode = "GSJ205";
		// // 			var toMobile = $("#tel").val();
		// // 			if (toMobile == '') {
		// // 				$("#note").html("请输入推荐的手机号码!");
		// // 				oPopup.style.display = "block";
		// // 				oPopupCon.classList.remove("zoomOutUp");
		// // 				oPopupCon.classList.add("zoomInDown");
		// // 				return;
		// // 			}

		// // 			var re = /^1[23458]\d{9}$/;

		// // 			if (!re.test(toMobile)) {
		// // 				$("#note").html("号码格式不正确，请重新输入!");
		// // 				oPopup.style.display = "block";
		// // 				oPopupCon.classList.remove("zoomOutUp");
		// // 				oPopupCon.classList.add("zoomInDown");
		// // 				return;
		// // 			}

		// // 			var effectiveMode = $("#effectiveMode").val(); //0立即生效  1次月生效
		// // 			var recommendWay = $("#recommendWay").val(); //3短信 2验证码
		// // 			$.ajax({
		// // 				type: "post",
		// // 				url: "",
		// // 				data: {
		// // 					"toMobile": toMobile,
		// // 					"productCode": productCode,
		// // 					"recommendWay": recommendWay,
		// // 					"commType": oPopup.commType,
		// // 					"effectiveMode": effectiveMode,
		// // 					"orderFrom": "2"
		// // 				},
		// // 				dataType: "json",
		// // 				contentType: "application/x-www-form-urlencoded; charset=UTF-8",

		// // 				success: function (data) {
		// // 					if (data.success) {
		// // 						$("#orderId").val(data.message);
		// // 					} else {
		// // 						$("#note").html(data.content);
		// // 						oPopup.style.display = "block";
		// // 						oPopupCon.classList.remove("zoomOutUp");
		// // 						oPopupCon.classList.add("zoomInDown");
		// // 					}
		// // 				}
		// // 			});

		// // 			clearInterval(iTimer);
		// // 			iTimer = setInterval(settime, 1000);
		// // 		}
		// // 	})

		// // })();

		// // 短信推荐 验证码推荐 切换
		// // (function () {
		// // 	var oLi = document.querySelectorAll(".jiayou_tab li");
		// // 	var oDiv = document.querySelector(".VerificationBox");
		// // 	var oBtn = document.querySelector(".jiayou_button");
		// // 	for (var i = 0; i < oLi.length; i++) {

		// // 		oLi[i].setAttribute("index", i);

		// // 		oLi[i].onclick = function () {
		// // 			for (var i = 0; i < oLi.length; i++) {
		// // 				oLi[i].className = '';
		// // 			};
		// // 			if (this.getAttribute("index") == 0) {
		// // 				oDiv.style.display = "none";
		// // 				oBtn.style.marginTop = "1rem";
		// // 				$('#recommendWay').val('3');
		// // 			} else {
		// // 				oDiv.style.display = "block";
		// // 				oBtn.style.marginTop = "0";
		// // 				$('#recommendWay').val('2');
		// // 			}
		// // 			this.className = "active";
		// // 		}
		// // 	}
		// // })();
		// // 短信推荐 验证码推荐 切换
		// // (function () {
		// // 	var oLi = document.querySelectorAll(".CheckBox li");
		// // 	var oBtn1 = document.querySelector("#button");
		// // 	var oBtn2 = document.querySelector(".jiayou_button");
		// // 	for (var i = 0; i < oLi.length; i++) {

		// // 		oLi[i].setAttribute("index", i);

		// // 		oLi[i].onclick = function () {
		// // 			for (var i = 0; i < oLi.length; i++) {
		// // 				oLi[i].className = '';
		// // 			};
		// // 			if (this.getAttribute("index") == 0) {
		// // 				$('#effectiveMode').val('0');
		// // 			} else {
		// // 				$('#effectiveMode').val('1');
		// // 			}
		// // 			this.className = "active";
		// // 			if (this.getAttribute("index") == 0) {
		// // 				oBtn1.style.display = "none";
		// // 				oBtn2.style.display = "block";
		// // 			} else {
		// // 				oBtn1.style.display = "block";
		// // 				oBtn2.style.display = "none";
		// // 			}
		// // 		}
		// // 	}
		// // })();
	</script>
</body>

</html>